<template>
	<view>
		<view class="" @click="onclick">
			dfasdfasd
		</view>
		<canvas class="canvas" canvas-id="myCanvas" :style="{height:`${canvasHeight}px`,width:`${canvasWidth}px`}"
			:width="canvasWidth" :height="canvasHeight"></canvas>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				canvasWidth: 0,
				canvasHeight: 0,
				fontConfig: {
					text: '0123456789+-=',
					fontSize: 50,
				}
			}
		},

		onLoad() {},
		methods: {
			onclick() {
				this.canvasWidth = this.draw(true);
				this.canvasHeight = 1 * this.fontConfig.fontSize;
				setTimeout(() => {
					this.draw();
				}, 100)
			},
			draw(isWidth) {

				const ctx = uni.createCanvasContext('myCanvas', this);
				ctx.clearRect(0, 0, this.canvasWidth, this.canvasHeight);

				ctx.setFontSize(this.fontConfig.fontSize);
				ctx.fillText(this.fontConfig.text, 0, this.fontConfig.fontSize);
				console.log(ctx.measureText(this.fontConfig.text).width);



				if (isWidth){
					return ctx.measureText(this.fontConfig.text).width;
				}
				ctx.draw();
			}
		}
	}
</script>

<style>
	.canvas {
		background-color: #cecece;
	}
</style>